<template>
  <div ref="chartDom" style="width: 100%;height:100%;"></div>
</template>

<script>

export default {
  name: "AssetTable3",
  data() {
    return {
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chartDom;
      const chart = this.$echarts.init(chartDom);
      // 定义不同柱子的颜色
      var colors = ['#FF6B6B', '#F6E58D', '#7ED6DF', '#E056FD', '#686DE0'];

      // 指定图表的配置项和数据
      var option = {
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            return params[0].name + '<br/>' + params[0].value;
          }
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70],
            type: 'bar',
            itemStyle: {
              // 为每个柱子单独设置颜色
              normal: {
                color: function (params) {
                  return colors[params.dataIndex];
                }
              }
            }
          }
        ]
      };
      chart.setOption(option);
    }
  }
}
</script>

<style scoped>

</style>